<template>
    <div class="product-basic">
        <h1>商品基本信息</h1>
        <el-form label-width="120px" :model='formData' :rules='rules' ref='form'>
            <el-form-item label='商品名称' prop='title'>
                <el-input v-model='formData.title'></el-input>
            </el-form-item>
            <el-form-item label='商品描述' prop='description'>
                <el-input type='textarea' v-model='formData.description'></el-input>
            </el-form-item>
            <el-form-item label='商品分类' prop='type_id'>
                <o-select code='productTypes' v-model='formData.type_id' type='cascader' select-type='common'></o-select>
            </el-form-item>
            <el-form-item label='支付方式' prop='pay_type'>
                <el-checkbox-group v-model='formData.pay_type'>
                    <el-checkbox v-for="item in payTypeOptions" :key='item.id' :label='item.id'>{{item.label}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label='轮播图' prop='slide_url'>
                <o-upload multiple v-model="formData.slide_url"></o-upload>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {MISS_REQUIRE_FORM_MESSAGE} from '@const';
    import {toast, formCheck} from '@u';
    export default {
        props : {
            productInfo : {
                type : Object,
                default : _ => {}
            }
        },
        watch : {
            productInfo : {
                handler : function (n) {
                    if (n.id) {
                        this.formData.title = n.title;
                        this.formData.description = n.description;
                        this.formData.pay_type = n.pay_type || [];
                        this.formData.slide_url = n.slide_url;
                        this.formData.type_id = n.type_id;
                    }
                }
            }
        },
        data () {
            return {
                formData : {
                    title : null,
                    description : null,
                    pay_type : [],
                    slide_url : [],
                    type_id : [],
                },
                payTypeOptions : [
                    {
                        id : 1,
                        label : '微信支付'
                    },
                    {
                        id : 2,
                        label : '小哥支付'
                    },
                    {
                        id : 3,
                        label : '微信支付+小哥联合支付'
                    }
                ],
                rules : {
                    title : [{required: true, message : MISS_REQUIRE_FORM_MESSAGE}],
                    description : [{required: true, message : MISS_REQUIRE_FORM_MESSAGE}],
                    type_id : [{required: true, message : MISS_REQUIRE_FORM_MESSAGE}],
                    pay_type : [{required: true, message : MISS_REQUIRE_FORM_MESSAGE}],
                    slide_url : [{required: true, message : MISS_REQUIRE_FORM_MESSAGE}],
                }
            }
        },
        methods : {
            async checkBasicInfo () {
                try {
                    return await formCheck(this.$refs.form);
                } catch (error) {
                    return false;
                }
            }
        }
    }
</script>

<style lang='less' scoped>
    .product-basic {
        padding: 15px 15px 1px;
        margin-top: 10px;
        background: #f5f5f5;
        margin-bottom: 15px;
        h1 {
            margin-bottom: 10px;
        }
    }
</style>